{extend name="public/list_page"/}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-col-space5" autocomplete="off">
            <div class="layui-inline layui-show-xs-block">
                <input type="text" name="keyword" id="productKeyword" placeholder="ID|产品名称" class="layui-input">
            </div>
            <div class="layui-inline">
                <select name="category">
                    <option value="">分类</option>
                    {volist name="category" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button type="submit" lay-submit="" lay-filter="productSearch" class="layui-btn layui-btn-normal" title="筛选"><i class="layui-icon">&#xe615;</i></button>
                <button type="reset" lay-submit lay-filter="productResetDate" class="layui-btn layui-btn-primary" title="重置"><i class="layui-icon">&#xe669;</i></button>
            </div>
        </form>

        <table class="layui-table" id="productList" lay-filter="list"></table>
    </div>
</div>

{/block}

{block name="custom"}
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addProduct"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-del" lay-event="delete"><i class="layui-icon">&#xe67e;</i>删除</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="copy">复制</button>
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-warm" lay-event="uploadTemplate"><i class="layui-icon layui-icon-template-1"></i>下载导入模板</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="upload" id="importData"><i class="layui-icon layui-icon-upload"></i>批量导入</button>
    </div>
</script>

<script type="text/html" id="isDel">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isDel" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="isHot">
    <input type="checkbox" name="hot" value="{{d.id}}" lay-skin="switch" lay-text="热销|热销" lay-filter="isHot" {{ d.is_hot == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="isRecommended">
    <input type="checkbox" name="is_recommended" value="{{d.id}}" lay-skin="switch" lay-text="推荐|推荐" lay-filter="isRecommended" {{ d.is_recommended == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barHandle">
    <button type="button" class="layui-btn handel-btn layui-bg-blue" lay-event="info" title="查看"><i class="fa fa-location-arrow"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-primary" lay-event="edit" title="编辑"><i class="fa fa-pencil-square-o"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-del" lay-event="del" title="删除"><i class="fa fa-trash-o"></i></button>
</script>
{/block}

{block name="js"}
<script>
    layui.use(['table','form'],function () {
        var table = layui.table;
        var form = layui.form;

        var productListTable = table.render({
            title: '',
            elem: "#productList",
            method: "post",
            url: "{:url('product/index')}",
            page: true,
            limits: [10, 25, 50, 100, 200, 300, 400, 500, 1000],
            toolbar: "#toolbar",//开启头部工具栏
            defaultToolbar:[],
            response: {
                statusCode: 'suc'
            },
            cols: [[
                {type:'checkbox',width:80},
                {field: 'id', title: 'ID', align: 'center',width:100},
                {field: 'name', title: '产品名称', align: 'center',width:400},
                {field: 'category_name', title: '分类', align: 'center'},
                // {field: 'is_hot', title: '热销', align: 'center', templet: "#isHot"},
                {field: 'is_recommended', title: '推荐', align: 'center', templet: "#isRecommended"},
                {field: 'status', title: '状态', align:'center', templet: '#isDel'},
                {field: 'sort', title: '排序', align: 'center'},
                {field: 'right', title: '操作', align: 'center', toolbar: '#barHandle'}
            ]],
            done:function (res, curr, count) {
                productCurrPage = curr
                $('.layui-table-cell').css({'height':'auto'})
            }
        });

        //头部工具栏事件
        table.on('toolbar(list)',function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addProduct':
                    xadmin.open('添加产品','{:url("product/add")}')
                    break;
                case 'copy':
                    var data = checkStatus.data;
                    if (data.length === 0){
                        hintMsg('请选中要复制的行')
                        break
                    }
                    productCopyLoad = layer.load(1,{shade:[0.5,'#FFF'],time:0})
                    ajaxRequest("{:url('product/copy')}",{data:JSON.stringify(data)},function (res) {
                        layer.close(productCopyLoad)//关闭遮罩层
                        layer.msg(res.msg,{time:msgShowTime},function () {
                            productListTable.reload('productList',{page:productCurrPage})
                        })
                    })
                    break;
                case 'delete':
                    var data = checkStatus.data;
                    if (data.length === 0){
                        hintMsg('请选中要删除的行')
                        break
                    }
                    let idArr = [];
                    for (let i = 0; i < data.length; i++) {
                        idArr.push(data[i].id)
                    }
                    //弹出遮罩层
                    productDelLoad = layer.load(1,{shade:[0.5,'#FFF'],time:0})
                    layer.confirm('确认批量删除？',{title:'',btn:['确定','取消'],cancel:function (index, layero) {
                            //关闭遮罩层
                            layer.close(productDelLoad)
                            productListTable.reload('productList',{page:productCurrPage})
                        }
                    },function (index) {
                        ajaxRequest("{:url('product/del')}",{id:idArr},function (res) {
                            //关闭遮罩层
                            layer.close(productDelLoad)
                            if (res.code == 'suc') {
                                sucMsg(res.msg)
                            } else {
                                errMsg(res.msg)
                            }
                        },function () {
                            errMsg('系统繁忙，请重试',function () {
                                //关闭遮罩层
                                layer.close(productDelLoad)
                            })
                        })
                        productListTable.reload('productList',{page:productCurrPage})
                    },function (index) {
                        productListTable.reload('productList',{page:productCurrPage})
                    })
                    break;
                case 'uploadTemplate':
                    layer.confirm('是否下载该文件', function (index) {
                        var url = "{:url('product/template')}";
                        layer.open({
                            time: 100,
                            type: 2,
                            title: '下载',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['80%', '70%'],
                            content: url,
                        });
                        layer.close(index);
                    });
                    break;
            }
        });

        //监听状态操作
        form.on('switch(isDel)',function (obj) {
            let id = obj.value
            let tip = '';
            let type = 1;
            if (obj.elem.checked == true){
                tip = '确定显示该产品？';
            } else {
                tip = '确定隐藏该产品？';
                type = 2;
            }
            changeStatus("{:url('product/changeStatus')}",id,type,1,tip,productListTable,'productList',productCurrPage)
        });

        form.on('switch(isRecommended)',function (obj) {
            let id = obj.value
            let tip = '';
            let type = 1;
            if (obj.elem.checked == true){
                tip = '确定推荐？';
            } else {
                tip = '确定取消推荐？';
                type = 2;
            }
            changeStatus("{:url('product/changeStatus')}",id,type,2,tip,productListTable,'productList',productCurrPage)
        });

        form.on('switch(isHot)',function (obj) {
            let id = obj.value
            let tip = '';
            let type = 1;
            if (obj.elem.checked == true){
                tip = '确定设置热销？';
            } else {
                tip = '确定取消热销？';
                type = 2;
            }
            changeStatus("{:url('product/changeStatus')}",id,type,3,tip,productListTable,'productList',productCurrPage)
        });

        // 监听工具列点击事件
        table.on('tool(list)',function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                let id = data.id
                let url = "{:url('product/edit')}?id="+id
                xadmin.open('编辑产品',url)
            }else if (obj.event == 'del') {
                layer.confirm('确认删除该产品？',{title:''},function (index) {
                    ajaxRequest("{:url('product/del')}",{id:data.id},function (res) {
                        if (res.code == 'suc') {
                            sucMsg(res.msg)
                        } else {
                            errMsg(res.msg)
                        }
                    })
                    productListTable.reload('productList',{page:productCurrPage})
                    layer.close(index);
                })
            } else if(obj.event === 'info') {
                if (obj.data.seo_link !== null) {
                    window.open("/product/" + obj.data.seo_link + ".html",'_blank')
                } else {
                    window.open("/product/" + obj.data.id + ".html",'_blank')
                }

            }
        });

        //监听搜索
        form.on('submit(productSearch)',function (data) {
            //重载表格
            productListTable.reload({
                where:{
                    keyword:data.field.keyword,
                    category:data.field.category
                },
                page:{
                    curr:1
                }
            })
            return false
        })

        //监听重置
        form.on('submit(productResetDate)',function () {
            productListTable.reload({
                where:{
                    keyword:null,
                    category:null
                },
                page:{
                    curr:1
                }
            })
        })
    })
</script>
{/block}